<html lang="en" class="pixel-ratio-4 retina android android-8 android-8-0-0"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
	<title>排污口详情</title>
	<link rel="stylesheet" href="css/sm.css">
	<link rel="stylesheet" href="css/module.css">
	<link rel="stylesheet" href="dist/idangerous.swiper.css">
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="dist/idangerous.swiper.min.js"></script>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="">
<!--	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"-->
<!--			integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="-->
<!--			crossorigin=""></script>-->
	<script src="js/leaflet.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="css/sm-extend.css">
	<link rel="stylesheet" href="css/demos.css">

	<script src="zepto.min.js"></script>

	<script src="weui/lib/jquery-2.1.4.js"></script>
	<script src="weui/js/jquery-weui.min.js"></script>
	<script type="text/javascript" src="leaflet.ChineseTmsProviders.js"></script>
	<script type="text/javascript" src="leaflet.mapCorrection.min.js"></script>
    <!-- 配置安全密钥 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "f224b66af28b904730ed77f90fe89673", // 替换为实际安全密钥
        };
    </script>
    <!-- 引入高德地图JS API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=b83005fa3dab64f357df742a75897353"></script>

	<style>
		/* Demo Styles */
		body {
			margin: 0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
			line-height: 1.5;
		}
		.swiper-container {
			width: 90vw;
			height: 250px;
			color: #fff;
			text-align: center;
			border-radius:8px;
		}
		.red-slide {
			background: #ca4040;
		}
		.blue-slide {
			background: #4390ee;
		}
		.orange-slide {
			background: #ff8604;
		}
		.green-slide {
			background: #49a430;
		}
		.pink-slide {
			background: #973e76;
		}
		.swiper-slide .title {
			width:100%;
			height:100%
		}
		.swiper-slide .title img{
			width:100%;
			height:100%;
		}
		.swiper-slide p {
			font-style: italic;
			font-size: 25px;
		}
		.pagination {
			position: absolute;
			z-index: 20;
			left: 10px;
			bottom: 10px;
		}
		.swiper-pagination-switch {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 8px;
			background: #555;
			margin-right: 5px;
			opacity: 0.8;
			border: 1px solid #fff;
			cursor: pointer;
		}
		.swiper-active-switch {
			background: #fff;
		}
		.swiper-dynamic-links {
			text-align: center;
		}
		.swiper-dynamic-links a {
			display: inline-block;
			padding: 5px;
			border-radius: 3px;
			border: 1px solid #ccc;
			margin: 5px;
			font-size: 12px;
			text-decoration: none;
			color: #333;
			background: #eee;
		}
	</style>
</head>
<body onload="myfunction()" style="">

<div class="content">

	<div class="weui-panel weui-panel_access">
		<div style="margin-top:25px;width: 100px;height: 25px;"><span style="color: #3189f1;font-weight:bold;margin-left: 15px">基础信息</span></div>
		<div class="list-block">
			<ul class="form-ul">
				<li><span class="title-text">排污口名称:</span><span id="outfallNm">海陵区城西街道泰州市石油化工有限责任公司雨洪排口</span></li>
				<li><span class="title-text">排污口编码:</span><span id="outfallClassifyCd">EA-321202-0002-GY-00</span></li>
				<li id="fl" style="display: none;"><span class="title-text">排污口类型:</span><span id="outfallType">undefined</span></li>
				<li id="fl1"><span class="title-text">排污口分类:</span><span id="outfallType1">工业排污口-工矿企业雨洪排口</span></li>
				<li><span class="title-text small">河长信息:</span><span id="rivers">沈振明 社区书记</span></li>
				<li><span class="title-text small">排放标准:</span><span id="dischargeStandard">《地表水环境质量标准》（GB 3838-2002）3类</span></li>
				<li><span class="title-text max">排入水体名称:</span><span id="waveNm">庆丰河</span></li>
<!--				<li><span class="title-text max">排污口责任主体:</span><span id="dutyName" style="width:calc(100% - 4.8rem);float:right;display:block"></span></li>-->
				<li><span class="title-text max1">排污口责任主体:</span><span id="dutyName">主要责任主体：泰州市石油化工有限责任公司</span></li>
<!--				<li id="cy"><span class="title-text max">排污口责任主体:</span><span id="sDutyName"></span></li>-->
				<li style="border-bottom:none"><span class="title-text small">现场照片:</span></li>
				<div class="swiper-container">
					<div class="swiper-wrapper" style="height: 250px; width: 648px;"><div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 324px; height: 250px;"><div class="title"><img src="./images/1.png" alt=""></div></div><div class="swiper-slide" style="width: 324px; height: 250px;"><div class="title"></div></div></div>
					<div class="pagination"><span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span><span class="swiper-pagination-switch"></span></div>
				</div>
			</ul>
		</div>
	</div>

	<div class="weui-panel weui-panel_access">
		<div style="margin-top: 25px;width: 100px;height: 25px;"><span style="color: #3189f1;font-weight:bold;margin-left: 15px">位置信息</span></div>
		<div class="list-block">
			<ul class="form-ul">


				<li><span class="title-text mini">经度:</span><span id="jd">119.88290853180409</span></li>
				<li><span class="title-text mini">纬度:</span><span id="wd">32.512876853258355</span></li>
				<li><span class="title-text small">详细地址:</span><span id="address">江苏省泰州市海陵区城西街道中海沥青(泰州)有限责任公司</span></li>

				<li style="border-bottom:none"><span class="title-text small">水系图:</span></li>
				<!-- <div id="waterHomeBaiduMap" style=" height: 230px;" class="swiper-container leaflet-container leaflet-touch leaflet-retina leaflet-fade-animleaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">
				</div>-->
				
				<div id="waterHomeBaiduMap"
					 style=" height: 230px;" class="swiper-container">
				</div>
			</ul>
		 </div>
	</div>

	<div class="weui-panel weui-panel_access">
<!--				<button class="bubtn btn1"  onclick="showSamplingTankList()" style="float: right;margin:0;">+ 添加在线监测</button>-->

		<div style="margin-top: 25px;width: 100px;height: 25px;"><span style="color: #3189f1;font-weight:bold;margin-left: 15px;line-height:25px;">监测信息</span></div>

		<div class="weui-cell">
	
		</div>
		<!--		<div  style="padding:5px 0; overflow: hidden; border-bottom: 1px solid #d9d9d9;">-->
		<!--			<button class="bubtn btn" style="float:right"  onclick="onQuery()">查询</button>-->
		<!--			<button class="bubtn btn2" style="float:right" onclick="onResert()">重置</button>-->
		<!--		</div>-->
		<div style="margin-top:6px">
			<view class="table">
				<view class="tr">
					<view class="th">因子</view>
					<view class="th">监测时间</view>
					<view class="th">监测数值</view>
					<view class="th">标准值上下限</view>
				</view>
				<div id="addList">
				<view class="tr">
                            <view class="td">总磷</view>
                            <view class="td">2023-11-6</view>
                            <view class="td">0.05(mg/L)</view>
                            <view class="td">≦0.2</view>
                        </view><view class="tr">
                            <view class="td">总氮</view>
                            <view class="td">2023-11-6</view>
                            <view class="td">0.84(mg/L)</view>
                            <view class="td">≦1.0</view>
                        </view><view class="tr">
                            <view class="td">氨氮</view>
                            <view class="td">2023-11-6</view>
                            <view class="td">0.422(mg/L)</view>
                            <view class="td">≦1.0</view>
                        </view><view class="tr">
                            <view class="td">PH值</view>
                            <view class="td">2023-11-6</view>
                            <view class="td">7.2</view>
                            <view class="td">6-9</view>
                        </view><view class="tr">
                            <view class="td">化学需氧量</view>
                            <view class="td">2023-11-6</view>
                            <view class="td">16(mg/L)</view>
                            <view class="td">≦20</view>
                        </view></div>
			</view>
		</div>
	</div>
	<div class="weui-panel weui-panel_access">
		<div style="margin-top: 25px;width: 100px;height: 25px;"><span style="color: #3189f1;font-weight:bold;margin-left: 15px">监督电话</span></div>
		<div class="list-block">
			<ul class="form-ul">

				<li><span class="title-text small">河长电话:</span><span style="display: block;text-align: center;" id="riversPhone">13952615050</span></li>
				<li><span class="title-text max">举报电话:</span><span style="display: block;text-align: center;margin-right: 30px">12345</span></li>
			</ul>

		</div>
	</div>
<!--	<div class="footer-box">-->
<!--		<p><span class="title-text max">生态环境部门:</span><span>12369</span></p>-->
<!--		<p><span class="title-text small">河长电话:</span><span id="riversPhone"></span></p>-->
<!--	</div>-->
</div>
<!--<div class="swiper-container">-->
<!--	<div class="swiper-wrapper">-->

<!--	</div>-->
<!--	<div class="pagination"></div>-->
<!--</div>-->

<!--<script src="js/jquery-1.10.1.min.js"></script>-->
<!--<script src="../dist/idangerous.swiper.min.js"></script>-->
<script>

  // 初始化地图
        window.onload = function() {
            // 创建地图实例
            var map = new AMap.Map('waterHomeBaiduMap', {
                viewMode: '2D', // 2D或3D视图模式
                zoom: 13,       // 缩放级别，取值范围：3-18
                center: [119.88290853180409, 32.512876853258355], // 中心点坐标（经度,纬度）
                resizeEnable: true, // 是否监控容器尺寸变化
                mapStyle: 'amap://styles/normal' // 地图样式
            });

          
        };

	var leafletAddress = `http://221.6.38.163:3300/`
	var jd
	var wd

	// var riversDuties = document.getElementById('riversDuties');
	$(function(){
		$('input[type="text"]').attr('disabled','disabled');
		$('textarea[type="text"]').attr('disabled','disabled');
	});


	let outfallCd = ''
	let userId
	function onResert(){
		let startTime = document.getElementById("startTime");
		let endTime = document.getElementById("endTime");
		startTime.value = ''
		endTime.value=''
	}

	var mySwiper = new Swiper('.swiper-container',{
		pagination: '.pagination',
		paginationClickable: true
	})

	function myfunction(){
		

	}

	function getStr(string, str) {
		var str_before = string.split(str)[0];
		var str_after = string.split(str)[1];
		var obj = {
			before: str_before,
			after: str_after
		};
		return obj;
	}

	// 解决加载高德路况偏移问题
	function mapCorrection() {
		L.GridLayer.include({
			_setZoomTransform: function (level, center, zoom) {
				if (center != undefined && this.options) {
					// 把鼠标坐标由WGS84坐标系转为DB09或GCJ02坐标系，leaflet从图面上获取的坐标是WGS84坐标系的，需要转换到瓦片对应的坐标系，才能匹配瓦片
					if (this.options.coordType == 'gcj02') {
						center = L.coordTransform().wgs84_To_gcj02(center.lng, center.lat);
					} else if (this.options.coordType == 'bd09') {
						center = L.coordTransform().wgs84_To_bd09(center.lng, center.lat);
					}
				}
				var viewHalf = this._map.getSize().divideBy(2);
				var mapProject = this._map.project(center, zoom);
				var mapPanePos = this._map._mapPane._leaflet_pos;
				var newPixelOrigin = mapProject.subtract(viewHalf)._add(mapPanePos).round();
				var scale = this._map.getZoomScale(zoom, level.zoom),
						translate = level.origin.multiplyBy(scale)
								.subtract(newPixelOrigin).round();
				if (L.Browser.any3d) {
					L.DomUtil.setTransform(level.el, translate, scale);
				} else {
					L.DomUtil.setPosition(level.el, translate);
				}
			},
			// 获取地图容器像素四至，根据修改后的鼠标中心点获取
			_getTiledPixelBounds: function (center) {
				if (center != undefined && this.options) {
					if (this.options.coordType == 'gcj02') {
						center = L.coordTransform().wgs84_To_gcj02(center.lng, center.lat);
					} else if (this.options.coordType == 'bd09') {
						center = L.coordTransform().wgs84_To_bd09(center.lng, center.lat);
					}
				}
				var map = this._map,
						mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(),
						scale = map.getZoomScale(mapZoom, this._tileZoom),
						pixelCenter = map.project(center, this._tileZoom).floor(),
						halfSize = map.getSize().divideBy(scale * 2);
				return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
			}
		})
		L.CoordTransform = function () {
			//bd09转wgs84
			this.bd09_To_wgs84 = function (lng, lat) {
				var gcj02 = this.bd09_To_gcj02(lng, lat);
				var wgs84 = this.gcj02_To_wgs84(gcj02.lng, gcj02.lat);
				return wgs84;
			}
			//wgs84转bd09
			this.wgs84_To_bd09 = function (lng, lat) {
				var gcj02 = this.wgs84_To_gcj02(lng, lat);
				var bd09 = this.gcj02_To_bd09(gcj02.lng, gcj02.lat);
				return bd09;
			}
			//wgs84转gcj02
			this.wgs84_To_gcj02 = function (lng, lat) {
				var dLat = transformLat(lng - 105.0, lat - 35.0);
				var dLng = transformLng(lng - 105.0, lat - 35.0);
				var radLat = lat / 180.0 * pi;
				var magic = Math.sin(radLat);
				magic = 1 - ee * magic * magic;
				var sqrtMagic = Math.sqrt(magic);
				dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
				dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
				var mgLat = lat + dLat;
				var mgLng = lng + dLng;
				var newCoord = {
					lng: mgLng,
					lat: mgLat
				};
				return newCoord;
			}
			//gcj02转wgs84
			this.gcj02_To_wgs84 = function (lng, lat) {
				var coord = transform(lng, lat);
				var lontitude = lng * 2 - coord.lng;
				var latitude = lat * 2 - coord.lat;
				var newCoord = {
					lng: lontitude,
					lat: latitude
				};
				return newCoord;
			}
			//gcj02转bd09
			this.gcj02_To_bd09 = function (lng, lat) {
				var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_pi);
				var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_pi);
				var bd_lng = z * Math.cos(theta) + 0.0065;
				var bd_lat = z * Math.sin(theta) + 0.006;
				var newCoord = {
					lng: bd_lng,
					lat: bd_lat
				};
				return newCoord;
			}
			//bg09转gcj02
			this.bd09_To_gcj02 = function (lng, lat) {
				var x = lng - 0.0065;
				var y = lat - 0.006;
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				var lontitude = z * Math.cos(theta);
				var latitude = z * Math.sin(theta);
				var newCoord = {
					lng: lontitude,
					lat: latitude
				};
				return newCoord;
			}
			var pi = 3.1415926535897932384626;
			var a = 6378245.0;
			var ee = 0.00669342162296594323;
			var x_pi = pi * 3000.0 / 180.0;
			var R = 6378137;

			function transform(lng, lat) {
				var dLat = transformLat(lng - 105.0, lat - 35.0);
				var dLng = transformLng(lng - 105.0, lat - 35.0);
				var radLat = lat / 180.0 * pi;
				var magic = Math.sin(radLat);
				magic = 1 - ee * magic * magic;
				var sqrtMagic = Math.sqrt(magic);
				dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
				dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
				var mgLat = lat + dLat;
				var mgLng = lng + dLng;
				var newCoord = {
					lng: mgLng,
					lat: mgLat
				};
				return newCoord;
			}

			function transformLat(x, y) {
				var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
				ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
				ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
				return ret;
			}

			function transformLng(x, y) {
				var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
				ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
				ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
				return ret;
			}
		}
		L.coordTransform = function () {
			return new L.CoordTransform();
		}
	}

	function addList(list){

		var str = ''
	
		
		//console.log($("#addList").children().length)
		if(list.length == 0 ){
			for (let i = $("#addList").children().length-1; i >=0 ; i--) {
				$("#addList").children().get(i).remove()
			}

			str = str + '<view class="tr" >\n' +
					'                            <view class="td"></view>\n' +
					'                            <view class="td"></view>\n' +
					'                            <view class="td"></view>\n' +
					'                            <view class="td"></view>\n' +
					'                        </view>'
			$("#addList").children().get(
					$("#addList").children().length-1
			)
			$("#addList").append(str);
		}else{

			// let elementsByTagName = document.getElementById("addList").getElementsByTagName("view");
			// for (let i = 0; i < document.getElementById("addList").getElementsByTagName("view").length; i++) {
			//     document.getElementById("addList").getElementsByTagName("view")[i].remove()
			// }
			for (let i = $("#addList").children().length-1; i >=0 ; i--) {
				$("#addList").children().get(
						i
				).remove()
			}
			
			for (let i = 0; i < list.length; i++) {
				var strTm = ''   
				if(list[i].tm.length>10){
					strTm = list[i].tm.substring(0, 10)
				}else{
					strTm = list[i].tm
				}
	

				str = str + '<view class="tr" >\n' +
						'                            <view class="td">'+list[i].name+'</view>\n' +
						'                            <view class="td">'+strTm+'</view>\n' +
						'                            <view class="td">'+list[i].value+'</view>\n' +
						'                            <view class="td">'+list[i].upValue+'</view>\n' +
						'                        </view>'
			}

			$("#addList").append(str);
		}


	}
	function showSamplingTankList(){
		url = "addOnlineMonitoring.html?outfallCd="+outfallCd+'&userId=' + userId;//此处拼接内容
		window.location.href = url;
	}


</script>


</body></html>